import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChange } from "@angular/core";
import { keyLabel } from "./xqform.data";

@Component({
  selector: 'xq-form',
  template: `
    <ng-container *ngIf="o">
      <form class="form-horizontal" role="form" style="position: relative">
        <div class="bigImg" *ngIf="bigimgurl" (click)="hideBigImg()">
          <img [src]="bigimgurl"/>
        </div>
        <div class="form-group" *ngFor="let item of xqobjArr">
          <ng-container *ngIf="!item.header">
            <label class="col-lg-3 control-label">{{item.label}}</label>
            <div class="col-lg-9">
              <ng-container *ngIf="item.haszp">
                <span *ngFor="let url of item.value"
                      style="cursor: pointer;display: inline-block;margin-right: 20px;margin-bottom: 20px"
                      (click)="showBigImg(url)">
                    <img [src]="url" class="imgSize"/>
                </span>
              </ng-container>
              <ng-container *ngIf="!item.haszp">
                <label class="control-label" style="text-align: left;">{{item.value}}</label>
              </ng-container>
            </div>
          </ng-container>
          <ng-container *ngIf="item.header">
            <label class="col-lg-3 control-label">{{item.label}}</label>
            <div class="col-lg-9">
              <table class="table table-bordered">
                <thead *ngIf="item.header.length">
                <tr>
                  <th *ngFor="let header of item.header">{{header}}</th>
                </tr>
                </thead>
                <tbody *ngIf="item.value.length">
                <tr *ngFor="let row of item.value">
                  <td *ngFor="let cell of row">
                    {{cell}}
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </ng-container>
        </div>
      </form>
    </ng-container>


    <!--<div class="modal fad" id="add_mbsjModal" tabindex="-1" role="dialog"-->
    <!--aria-labelledby="myModalLabel">-->
    <!--<div class="modal-dialog" style="width: 800px" role="document">-->
    <!--<div class="modal-content">-->
    <!--<div class="modal-header">-->
    <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span-->
    <!--aria-hidden="true">&times;</span></button>-->
    <!--<h4 class="modal-title" id="myModalLabel">添加数据</h4>-->
    <!--</div>-->
    <!--<div class="modal-body">-->
    <!--<div class="row">-->

    <!--</div>-->
    <!--</div>-->
    <!--<div class="modal-footer">-->
    <!--<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
    <!--<button type="button" class="btn btn-primary">确定</button>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
  `,
  styles: [
    "form{max-height: 600px;overflow-y: auto;overflow-x: hidden}",
    ".imgSize{width:100px;height:100px;}",
    ".bigImg{position:absolute;top:0px;left:50px;width: calc(100% - 100px);height: 600px;cursor: pointer;z-index: 800}",
    ".bigImg>img{width: 100%;height: 100%}"
  ]
})
export class XqformComponent implements OnInit, OnChanges {
  /**
   * from
   * keyValue
   */
  @Input() o: any;
  xqobjArr: any[] = [];
  bigimgurl: string = "";

  showBigImg(url: string): void {
    this.bigimgurl = url;
  }

  hideBigImg(): void {
    this.bigimgurl = "";
  }

  /**
   * 处理显示的数据
   */
  initform(): void {
    this.bigimgurl = "";
    this.xqobjArr.length = 0;
    const xqfrom = this.o.from;
    const keyValue = this.o.keyValue; // 所有的字段和值  key -value
    const keyLable = keyLabel[xqfrom]; // 定制显示的字段  key-label
    // 判断 value中是否有数组
    for (let key in keyLable) {
      let obj = {};
      if (typeof keyValue[key] == "string" || typeof keyValue[key] == "number" || keyValue[key] == null) {
        obj["label"] = keyLable[key];
        obj["header"] = "";
        obj["value"] = keyValue[key];
        if (key == "zpurl") {
          obj["haszp"] = true;
          obj["value"] = keyValue[key] ? keyValue[key].split(";") : "";
        }
      } else if (typeof keyValue[key] === "object") {
        // 数组
        obj["label"] = keyLable[key]["groupmc"];
        const headers = [], values = [];
        keyValue[key].forEach((item, index) => {
          const itemvalues = [];
          for (let gkey in keyLable[key]) {
            if (gkey != "groupmc") {
              if (index === 0) {
                headers.push(keyLable[key][gkey]);
              }
              itemvalues.push(item[gkey]);
            }
          }
          values.push(itemvalues);

        });
        obj["header"] = headers;
        obj["value"] = values;
      }
      this.xqobjArr.push(obj);
    }
    console.log(this.xqobjArr);
  }

  constructor() {

  }

  ngOnInit() {
    this.initform();
  }

  ngOnChanges(changes: { [hs: string]: SimpleChange }) {
    const firstchange = changes.o.firstChange;
    if (!firstchange) {
      this.initform();
    }
  }

}
